<div class="w-full mx-auto">
   <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-2">

    @foreach($components as $component)
        <div class="bg-gray-900 rounded-lg shadow-lg p-2 mb-2">
            <div class="cursor-pointer">
                <img src="https://qianduanku.test/{{ $component['screenshot'] }}" alt="{{ $component['title'] }}" class="w-full h-auto"
                     wire:click="mountAction('viewDetail', { id: {{ $component['id'] }}, project_id:{{ $project_id == null ? 0 : $project_id }}})">
            </div>
            <div class="my-1">
                {{ $component['title'] }}
            </div>
        </div>
    @endforeach
        <x-filament-actions::modals />
   </div>
</div>
